import React, { useState, useRef, useEffect } from 'react';
import { history, connect } from 'umi';
import { Card, Button, Form, Input } from 'antd';
import { Col, Row, Tag, Tooltip, Space, Cascader, notification } from 'antd';
import DrawerCondition from '@/components/DrawerCondition';
import { stage } from '@/common/contact'
import { phoneReg } from '@/common/regular';
import FormCondition from '@/components/FormCondition';
import Uploadjs from '@/utils/aliOssUpload';
import TreeRole from '../TreeRole';
const { SHOW_CHILD } = Cascader;
const ManagementForm = (props) => {
  const {
    dispatch,
    visible = {},
    onClose,
    handleCallback,
    loading,
    departmentNewList = [],
  } = props;
  const refs = useRef(null);
  const { show = false, detail = {}, type = 'insert', roleList = [] } = visible;

  const { id, } = detail;
  const [form] = Form.useForm();
  useEffect(() => {

  }, [show])
  const filterLastSelect = (list) => {
    return list[list.length - 1].toString();
  };
  // 新增修改 传id修改 不传id新增
  const filterLastChild = (list) => {
    if (!list) {
      return '';
    }
    return list
      .map((item) => {
        return item[item.length - 1];
      })
      .toString();
  };
  const fetchRoleEdit = () => {
    let roleIdList = refs.current.onChange();
    form.validateFields().then(async (values) => {
      const { profile, departmentId, levelCode, performanceDepartmentId, stage = [], sellsUserAuth = [], cultivateUserAuth = [], potentialUserAuth = [] } =
        values;
      const { id } = detail;
      const img = (await Uploadjs(profile)) || [];
      // if (!roleIdList) {
      //   return notification.warn({
      //     message: '警告提示',
      //     description: '请关联角色后提交',
      //   });
      // } else {
      dispatch({
        type: id
          ? 'system/fakeUpdateAuthAdmin'
          : 'system/fakeInsertAuthAdmin',
        payload: {
          ...values,
          profile: img.toString(),
          departmentId: filterLastSelect(departmentId),
          roleIdList,
          id,
        },
        callback: () => {
          onClose();
          handleCallback();
        },
      });
      // }
    });
  };

  const filterList = (list) => {
    return list.map((item) => {
      const { departmentName: label, id: value, subDepartmentList: children } = item;
      const localItem = {
        label,
        value,
        children: children ? filterList(children) : undefined,
      };
      return localItem;
    });
  };
  const modalProps = {
    title: `${id ? '修改' : '新增'}`,
    visible: show,
    width: 800,
    onClose,
    destroyOnClose: true,
    footer: (
      <Button type="primary" loading={loading} onClick={fetchRoleEdit}>
        确定
      </Button>
    ),
  };
  const formItems = [
    {
      label: '账号(手机号)',
      name: 'account',
      rules: [{ pattern: phoneReg, message: '请输入正确的手机号' },],
      disabled: id,
    },
    {
      label: '员工头像',
      name: 'profile',
      type: 'upload',
      maxFile: 1,
      rules: [{ required: false }],
    },

    {
      label: '员工名称',
      name: 'username',
    },
    {
      label: '员工备注',
      name: 'remark',
      rules: [{ required: false }],
    },
    {
      label: '邮箱',
      name: 'email',
      rules: [{ required: false }],
    },
    {
      label: '岗位类型',
      name: 'adminType',
      type: 'radio',
      select: {
        agent: '兼职',
        employee: '全职',
      },
    },
    {
      label: '归属部门',
      name: 'departmentId',
      type: 'cascader',
      changeOnSelect: true,
      select: filterList(departmentNewList),
    },
  ];

  return (
    <>
      <DrawerCondition {...modalProps}>
        <Row>
          <Col span={20}>
            <FormCondition form={form} formItems={formItems} initialValues={detail}></FormCondition>
          </Col>
          <Col span={24}>
            <TreeRole type={type} roleLists={roleList} refs={refs}></TreeRole>
          </Col>
        </Row>
      </DrawerCondition>
    </>
  );
};
export default connect(({ system, loading }) => ({
  ...system,
  loading:
    loading.effects[
    'system/fakeInsertAuthAdmin' || 'system/fakeUpdateAuthAdmin'
    ],
}))(ManagementForm);
